<template>
  <div>
    <v-loading :showLoading="showLoading"></v-loading>
    <div class="Order">
      <div class="address flex" @click="setAddress()">
        <div class="a1 selfCtenter"><i class="icon icon_location"></i></div>
        <div class="a2 selfCtenter" v-if="address && address.detailAddress">
          <p class="receiver flex">
            <span class="inline-block text-overflow">收货人:<span
              style="padding-left:5px">{{address.receiver}}</span></span>
            <span class="tel">{{address.tel}}</span></p>
          <p>收货地址：{{address.fullAddress}}</p>
        </div>
        <div class="a2 selfCtenter" v-if="address &&  !address.detailAddress">
          <p>请添加收件地址</p>
        </div>
        <div class="a3 selfCtenter">
          <i class="icon"></i>
        </div>
      </div>
      <!-- <img src="../../assets/address_bg.png" />-->

      <div class="orderinfo flex-verticle">
        <div class="goodInfo flex" v-if="cartList">
          <img v-bind:src="cartList.img">
          <div class="selfCtenter">
            <p class="gtitle">{{cartList.title}}</p>
            <p class="fee">￥{{cartList.price}}（免运费） <span class="number"> x{{cartList.cartnumber}} </span></p>
          </div>
        </div>
        <div class="sendway flex">
          <p class="fl">配送方式：</p>
          <div class="fr">
            <p>￥0.00</p>
            <p>快递发货</p>
          </div>
        </div>

        <div class="sendway flex">
          <div class="m1">
            <span>买家留言：</span>
            <input type="text" placeholder="点击给商家留言"/>
          </div>
        </div>
        <div class="sendway flex coupon" @click="isshow = true">
          <p class="fl">优惠</p>
          <div class="fr">
            <div><span class="usecoupon">{{selectedCoupon ? selectedCoupon.title : '使用优惠券'}}</span> <i
              class="icon "></i></div>
          </div>
        </div>
        <div class="sendway flex coupon">
          <p class="fl">短信通知收件人</p>
          <div class="fr">
            <div>
              <q-toggle v-model="checked"></q-toggle>
            </div>
          </div>
        </div>
        <div class="sendway smallsize">
          <div class="over-hidden flex ">
            <p class="fl">商品金额</p>
            <div class="fr">
              <p>￥{{totalPrice}}</p>
            </div>
          </div>
          <div class="over-hidden flex ">
            <p class="fl">运费</p>
            <div class="fr">
              <p>￥0.00</p>
            </div>
          </div>
        </div>

      </div>

      <div class="orderFooter flex">
        <div class="o1 selfCtenter">
          合计：<span>￥{{countTotalPrice}}</span>
        </div>
        <div class="o3 selfCtenter">
          立即支付
        </div>
      </div>
    </div>
    <v-coupon :isshow="isshow" :selectedCoupon="selectedCoupon" :activityId="activityId"
              v-on:hideDialog="hideDialog"></v-coupon>
    <div class="blackbg" v-if="isshow" @click="isshow = false"></div>
    <q-drawer right-side ref="address">
      <v-address v-on:closeDrawer="closeItemFun"></v-address>
    </q-drawer>
  </div>
</template>
<script>
  import {ctoast, confirmDialog, getLocalstorage, setWechatTitle} from '../../common/js/common'
  import Coupon from '../couponCommon/index'
  import {HttpRequest} from '../../common/js/httpFun'
  import {linklist} from '../../common/js/mockdata'
  import Address from '../userCenter/address'
  import Loading from '../loading/index'
  export default({
    data () {
      return {
        'checked': false,
        'isshow': false,
        'activityId': null,
        'cartList': null,
        'address': null,
        'selectedCoupon': null,
        'totalPrice': 0,
        'finalPrice': 0,
        'showLoading': true
      }
    },
    created () {
      let a = getLocalstorage('cartlist')
      if (a) {
        let userInfo = getLocalstorage('userInfo')
        if (userInfo) {
          // 获取用户地址信息
          let param = {id: userInfo.userId}
          let result = HttpRequest(linklist.addressUrl, param)
          result.then((response) => {
            let b = response.body
            this.address = b
            this.showLoading = false
            this.cartList = JSON.parse(a)
            this.totalPrice = ((this.cartList.price * 100) * this.cartList.cartnumber / 100).toFixed(2)
            this.$nextTick(function () {
              setWechatTitle(this.cartList.title)
            })
          }, (response) => {
            this.showLoading = false
          }).catch((response) => {
            this.showLoading = false
          })
        }
      }
      else {

      }
    },
    computed: {
      countTotalPrice () {
        if (this.selectedCoupon) {
          this.finalPrice = this.totalPrice - this.selectedCoupon.price
        }
        else {
          this.finalPrice = this.totalPrice
        }
        return this.finalPrice
      }
    },
    methods: {
      createToast (text) {
        ctoast(text)
      },
      createConfirmDialog (msg, yesFun, noFun) {
        confirmDialog(msg, yesFun, noFun)
      },
      cancelOrder () {
        let dialog = this.createConfirmDialog('您确实已收到物品了吗？确定后不可返回', function () {
          dialog.close()
        }, function () {
          dialog.close()
        })
      },
      hideDialog () {
        if (arguments[0]) {
          this.selectedCoupon = arguments[0]
        }
        this.isshow = false
      },
      setAddress () {
        this.$refs.address.open()
        return false
      },
      closeItemFun () {
        this.$refs.address.close()
      }
    },
    components: {
      'v-coupon': Coupon,
      'v-address': Address,
      'v-loading': Loading
    }
  })
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/redifined.styl"
  @import "./addOrder.styl"
</style>
